<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="皮肤页,18001010321,王梓豪">
    <title>皮肤页面18001010321</title>
    <link rel="stylesheet" href="../iconfont/store/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            min-width: 320px;
        }
        img {
            display: block;
            border: none;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        ul,ol{
            list-style: none;
        }
        .all {
            background-color: rgb(243, 243, 253);
            overflow: hidden;
            position: relative;
        }
        .navi {
            border-bottom: 1px solid #eee;
            top: 0;
            width: 100%;
            height: 60px;
            z-index: 3;
        }
        .navi_top {
            position: relative;
            height: 60px;
            background-color: #fff;
            display: flex;
        }
        .icon-gouwuche {
            font-size: 30px;
            position: absolute;
            right: 20px;
            top: 16px;
        }
        .navi_top input{
            color: rgb(159, 172, 181);
            position: absolute;
            top: 10px;
            left: 30px;
            outline: none;
            border: none;
            font-size: 15px;
            background-color: rgb(240, 243, 249);
            width: 110px;
        }
        .search{
            position: relative;
            left: 40px;
            top: 15px;
            border-radius: 60px;
            height: 34px;
            width: 160px;
            background-color: rgb(240, 243, 249);
            border: none;
        }
        .icon-fangdajing {
            position: absolute;
            width: 19px;
            height: 18.6px;
            left: 10px;
            top: 10px;
            z-index: 2;
            color: rgb(140, 140, 140);
        }
        .icon-changyongicon- {
            position: absolute;
            left: 6px;
            top: 10px;
            font-size: 39px;
            color: #000;
        }
        .list_1 {
            background-color: #fff;
            height: 45px;
            /* background-color: aqua; */
        }
        .list_1 ul {
            overflow: hidden;
            display: flex;
            height: 100%;
        }
        .list_1 ul li {
            flex-grow: 1;
            line-height: 45px;
            font-size: 19px;
            padding:0 4vw;
            line-height: 45px;
            text-align: center;
            color: rgb(119, 119, 119);
        }
        .list_1 ul li.current{
            font-weight: bold;
            color: #000;
        }
        .list_2 {
            background-color: #fff;
            height: 40px;
            /* background-color: #ccc; */
            overflow: hidden;
        }
        .list_2_in {
            height: 25px;
            background-color: #fff;
            margin-top: 5px;
        }
        .list_2_in ul{
            height: 100%;
            display: flex;
        }
        .list_2_in li {
            color: rgb(140, 140, 140);
            padding-left: 7.9vw;
            position: relative;
            width: 40%;
            line-height: 30px;
            font-size: 16px;
            border-right: 1px solid #eee;
        }
        .list_2_in li:nth-child(3) {
            border: none;
        }
        .list_2_in li div {
            transform: rotateX(0deg);
            /* background-color: royalblue; */
            position: absolute;
            top: 0;
            right: 9vw;
        }
        .main {
            margin-top: 155px;
            width: 100%;
            background-color: rgb(243, 243, 253);
        }
        .main_in {
            width: 97%;
            margin: 0 auto;
        }
        .main ul {
            flex-wrap: wrap;
            display: flex;
        }
        .main ul li {
            position: relative;
            margin: 2vw;
            overflow: hidden;
            width: 45%;
            height: 35vw;
        }
        .main img {
            width: 100%;
            height: 35vw;
        }
        .text {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 14vw;
            background: linear-gradient(to top, rgba(0,0,0,.9) 0%,rgba(100,100,100,.1) 100%);
        }
        .text_in {
            position: relative;
            width: 100%;
            height: 60px;
        }
        .text .name {
            height: 7vw;
            line-height: 10vw;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 4vw;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .text .price {
            height: 7vw;
            line-height: 7vw;
            color: rgb(207, 189, 147);
            font-size: 4vw;
            width: 100%;
            text-align: center;
        }
        .fixed {
            z-index: 3;
            width: 100%;
            position: fixed;
            top: 0;
        }
        .typeList {
            /* transition: all .5s; */
            display: none;
            width: 100%;
            height: 200px;
            text-align: center;
            font-size: 20px;
            background-color: #fff;
            line-height: 200px;
        }   
    </style>
</head>
<body>
    <div class="all">
        <div class="fixed">
            <div class="navi">
                <div class="navi_top">
                    <a href="./store.html"><span class="iconfont icon-changyongicon-"></span></a>
                    <div class="search">
                        <span class="iconfont icon-fangdajing"></span>
                        <input type="text" value="找你喜欢的商品">
                    </div>
                    <span class="iconfont icon-gouwuche"></span>
                </div>
            </div>
            <div class="list_1">
                <ul>
                    <li>英雄</li>
                    <li class="current">皮肤</li>
                    <li>海克斯及其他</li>
                    <li>礼包</li>
                </ul>
            </div>
            <div class="list_2">
                <div class="list_2_in">
                    <ul>
                        <li>
                            排序
                            <div>
                                <span class="iconfont icon-xia"></span>
                            </div>
                        </li>
                        <li>
                            分类
                            <div>
                                <span class="iconfont icon-xia"></span>
                            </div>
                        </li>
                        <li>
                            过滤
                            <div>
                                <span class="iconfont icon-xia"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="typeList">
                写不动了这里脑补吧>-<
            </div>
        </div>
        <div class="main">
            <div class="main_in">
                <ul>
                    <!-- <li>
                        <img src="../images/暗星女王丽桑卓.jpg">
                        <div class="text">
                            <div class="name">暗星女王 丽桑卓</div>
                            <div class="price">
                                <span class="iconfont icon-jinbi"></span>
                                    7900
                            </div>
                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <script>
        let ul=document.querySelector(".list_2_in ul");
        let li=ul.querySelectorAll("li");
        let div0=li[0].querySelector("div");
        let div1=li[1].querySelector("div");
        let div2=li[2].querySelector("div");
        let div=[div0,div1,div2];
        let deg=[0,0,0]
        let typeList=document.querySelector(".typeList");
        let flag=false;
        console.log(div);
        for(let i=0;i<ul.children.length;i++){
            li[i].index=i;
            li[i].addEventListener("click",function(){
                if(flag==false){
                    flag=true;
                    typeList.style.display="block";
                }else{
                    flag=false;
                    typeList.style.display="none";
                }
                deg[this.index]+=180;
                div[this.index].style.transform="rotateX("+deg[this.index]+"deg)";
            });
        }
    </script>
    <script>
        let data =[
            {
                src:"../images/暗星女王丽桑卓.jpg",
                name:"暗星女王 丽桑卓",
                price:7900
            },
            {
                src:"../images/狮子星神奈德丽.jpg",
                name:"狮子星神 奈德丽",
                price:7900
            },
            {
                src:"../images/星界赫卡里姆.jpg",
                name:"人马星神 赫卡里姆",
                price:7900
            },
            {
                src:"../images/双鱼星神娜美.jpg",
                name:"双鱼星神 娜美",
                price:7900
            },
            {
                src:"../images/暗星奥丽安娜.jpg",
                name:"暗星 奥丽安娜",
                price:7900
            },
            {
                src:"../images/卡萨丁.jpg",
                name:"掠星魔刃 卡萨丁",
                price:7900
            },
            {
                src:"../images/天煞劫.jpg",
                name:"天煞 劫",
                price:9900
            }
        ];
        let ul1=document.querySelector(".main_in ul");
        data.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=`<img src="${v.src}">
                        <div class="text">
                            <div class="name">${v.name}</div>
                            <div class="price">
                                <span class="iconfont icon-jinbi"></span>
                                    ${v.price}
                            </div>
                        </div>`;
            ul1.append(li);
        });
    </script>
</body>
</html>